<!DOCTYPE html>
<html>
<head>
	<title>HLS converter and player demo</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="shim/console.time.js"></script>

	<!-- Yandex.Metrika counter -->
	<script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter23392234 = new Ya.Metrika({id:23392234, clickmap:true, trackLinks:true, accurateTrackBounce:true, trackHash:true}); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="//mc.yandex.ru/watch/23392234" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
	<!-- /Yandex.Metrika counter -->
</head>
<body class="loading" style="text-align: center">
	<a href="https://github.com/RReverser/mpegts"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
	
	<h1>HTTP Live Streaming<br />JavaScript converter and player demo</h1>
	
	<main>
		<div id="video-streaming"><canvas id="canvas"></canvas></div>
		<br />
		<input class="button orange" type="button" id="play" value="► Play" />
		<input class="button black" type="button" id="pause" value="◼ Pause" />
	</main>
	
	<img id="loading-indicator" src="assets/ajax-loader.gif" />
	
	<div>
		<img src="assets/chrome.png" />
		<img id="img-center" src="assets/firefox.png" />
		<img src="assets/ie10.png" />
	</div>
	
	<h3>Works best in Chrome (stable branch), having lags when switching videos but still working in latest Firefox and IE10+.</h3>
	
	<p id="comments">Please note that demo uses 3rd-party <a href="http://www.mediamotiononline.com/">HLS demo source</a> and service <a href="http://www.corsproxy.com/">http://www.corsproxy.com/</a> for proxying it with needed Cross-Origin-Request headers, so it may be unstable.</p>
	
	<script src="browser.js" data-canvas="canvas" data-hls="//d3sporhxbkob1v.cloudfront.net/bill/vod/sample-video/400k.m3u8">
		// UI initialization when first video chunk is converted

		document.body.classList.remove('loading');

		var converter = this;

		['play', 'pause'].forEach(function (action) {
			document.getElementById(action).addEventListener('click', function () {
				document.body.classList.toggle('paused');
				converter.currentVideo[action]();
			});
		});
	</script>
</body>
</html>
